import React, {Component} from "react";
import {getRandomKey, loadLinks, loadScript} from "jh-utils";
import { Spin, Result, Button } from "antd";
import {isFunction} from "lodash-es";
import {STATIC_ROOT} from "../../Config";
import BaseComp from "../../Base/BaseComp";
const sheetRoot = `${STATIC_ROOT}/sheetExcel`;

export default class SheetExcel extends BaseComp {

    constructor(props) {
        super(props);
        this.state = {
            isError: false,
            loading: true,
        };
        window.excelAppins = this;
    }
    COMP_ID = `excel_${getRandomKey()}`;

    componentDidMount(){
        this.setAppinsLoading(true,this.initSheetExcel.bind(this))
    }

    componentWillUnmount() {
        this.destroySheet();
    }

    /**
     * window.luckysheet
     */
    luckyExcelIns;
    luckySheetIns;

    setAppinsLoading(loading = false, cb){
        let { appins } = this.props;
        if(appins && isFunction(appins.setLoading)){
            appins.setLoading(loading, cb)
        }
    }

    /**
     * 初始化
     */
    initSheetExcel(){
        loadLinks([
            `${sheetRoot}/luckysheet/plugins/css/pluginsCss.css`,
            `${sheetRoot}/luckysheet/plugins/plugins.css`,
            `${sheetRoot}/luckysheet/css/luckysheet.css`,
        ],{v:this.COMP_ID});
        loadScript(`${sheetRoot}/luckysheet/plugins/js/plugin.js`,rsp =>{

            if (rsp && rsp.isError) { // 有错误
                this.setAppinsLoading();
                this.setState({loading: false, isError: true});
                return false;
            }
            if (this.state.isError) {
                this.setState({isError: false});
            }
            loadScript(`${sheetRoot}/luckysheet/luckysheet.umd.js`, rsp => {
                if (rsp && rsp.isError) {
                    this.setAppinsLoading();
                    this.setState({loading: false, isError: true});
                    return false;
                }

                loadScript(`${sheetRoot}/luckyexcel.umd.js`,rsp => {
                    if (rsp && rsp.isError) {
                        this.setAppinsLoading();
                        this.setState({loading: false, isError: true});
                        return false;
                    }
                    this.setState({isError: false,loading: false}, () => {
                        if(window.luckysheet && window.LuckyExcel){
                            this.luckyExcelIns = window.LuckyExcel;
                            this.luckySheetIns = window.luckysheet;
                            window.COMP_ID = this.COMP_ID;
                            let { appins } = this.props;
                            console.log('appins:',appins);
                            if(appins && appins.initData){
                                appins.initData(true).then()
                            }
                        }

                    })

                });

            })
        })
    }

    showLoading(cb){
        this.setState({
            loading: true
        },()=>{
            isFunction(cb) && cb();
        })
    }
    hideLoading(cb){
        this.setState({
            loading: false
        },()=>{
            isFunction(cb) && cb();
        })
    }



    /**
     * 销毁表格
     */
    destroySheet() {
        if (window.luckysheet && window.luckysheet.destroy) {
            window.luckysheet.destroy();
        }
    }

    /**
     * 重新导入报表
     */
    hdlRetryLoad() {
        window.location.reload();
    }

    mainRender(){
        const styleO = {
            margin: 0, padding: 0, height: '100%', width: '100%', ...(this.props.style || {})
        };
        let {loading, isError} = this.state;
        if (isError) {
            // 'sc-load-err': '表格加载失败！'
            return (
                <div style={styleO}>
                    <Result
                        status={'warning'}
                        title={this.myFormatMessage('doc-load-err')}
                        extra={<Button type={"primary"}
                                       onClick={this.hdlRetryLoad.bind(this)}>
                            {this.formatMsgByCn('重试')}
                        </Button>}
                    />
                </div>
            )
        } else if (loading) {
            return <div style={styleO}>
                <Spin spinning={loading} style={{width: '100%', marginTop: 100}}/>
            </div>
        }
        return (
            <div id={this.COMP_ID} style={styleO}/>
        )
    }
}
